<template>
  <el-dialog title="新建树" width="40%" destroy-on-close :visible.sync="dialogAddDeviceForm" @close="onClose">
    <el-form ref="formName" v-loading="loading" :model="vps" label-width="100px" class="demo-dynamic">
      <el-form-item label="deviceId" prop="deviceId" :rules="{ required: true, message: '不能为空', trigger: 'change' }">
        <el-input v-model="vps.deviceId" autocomplete class="inp" placeholder="请输入账号" />
      </el-form-item>
      <el-form-item label="ip" prop="ip" :rules="{ required: true, message: '不能为空', trigger: 'change' }">
        <el-input v-model="vps.ip" class="inp" autocomplete placeholder="请输入账号" />
      </el-form-item>
      <div v-for="(domain, index) in vps.vpns" :key="domain.key">

        <el-form-item
          label="vpn名称"
          :prop="'vpns.' + index + '.vpnPlatName'"
          :rules="{ required: true, message: '不能为空', trigger: 'change' }"
        >
          <el-select v-model="domain.vpnPlatName" class="inp" placeholder="vpn名称">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
          <el-button type="danger" icon="el-icon-delete" circle @click.prevent="removeDomain(domain)" />
        </el-form-item>
        <div v-if="vps.vpns[index].vpnPlatName === 'v2'">
          <el-form-item
            label="链接"
            :prop="'vpns.' + index + '.vpnLink'"
            :rules="{ required: true, message: '不能为空', trigger: 'change' }"
          >
            <el-input v-model="domain.vpnLink" autocomplete class="inp" placeholder="请输入链接" />
          </el-form-item>
        </div>
        <div v-else>
          <!-- <el-form-item
            label="账号"
            :prop="'vpns.' + index + '.username'"
            :rules="{ required: true, message: '不能为空', trigger: 'change' }"
          >
            <el-input v-model="domain.username" autocomplete class="inp" placeholder="请输入账号" />
          </el-form-item> -->

          <div
            v-if="'vpns.' + index + '.vpnPlatName' === 'v2'"
          >
            <el-form-item
              label="链接"
              :prop="'vpns.' + index + '.vpnLink'"
              :rules="{ required: true, message: '不能为空', trigger: 'change' }"
            >
              {{ vpns[index].vpnPlatName }}
              <el-input v-model="domain.vpnLink" autocomplete class="inp" placeholder="请输入链接" />
            </el-form-item>
          </div>

          <div v-else>
            <el-form-item
              label="账号"
              :prop="'vpns.' + index + '.username'"
              :rules="{ required: true, message: '不能为空', trigger: 'change' }"
            >
              <el-input v-model="domain.username" autocomplete class="inp" placeholder="请输入账号" />
            </el-form-item>

            <el-form-item
              label="密码"
              :prop="'vpns.' + index + '.passwd'"
              :rules="{ required: true, message: '不能为空', trigger: 'change' }"
            >
              <el-input v-model="domain.passwd" autocomplete class="inp" placeholder="请输入密码" />
            </el-form-item>

            <el-form-item
              label="最高在线数"
              :prop="'vpns.' + index + '.maxOnline'"
              :rules="{ required: true, message: '不能为空', trigger: 'change' }"
            >
              <el-input v-model="domain.maxOnline" autocomplete class="inp" placeholder="最高在线数" />
            </el-form-item>
          </div>
        </div>

        <el-divider />
      </div>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button :loading="loading" type="primary" @click="addDomain">新增分组</el-button>
      <el-button :loading="loading" type="primary" @click="submitForm('formName')">确 定</el-button>
      <el-button :loading="loading" @click="handleeviceCacel('formName')">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  props: {
    isOpen: {
      type: Boolean
    }
  },
  data() {
    return {
      dialogAddDeviceForm: false,
      loading: false,
      vps: {
        deviceId: '',
        ip: '',
        vpns: [
          {
            vpnPlatName: '',
            username: '',
            vpnLink: '',
            passwd: '',
            maxOnline: ''
          }
        ]
      },
      options: []
    }
  },
  created() {
    this.inittableSle()
  },
  methods: {
    inittableSle() {
      this.$http.get(`/api/cloud_data/support/vpn`).then(res => {
        if (res.success) {
          this.options = res.data.map(ele => {
            return {
              value: ele.key,
              label: ele.value
            }
          })
        } else {
          this.$error(res.msg)
        }
      })
    },
    // 新建树弹窗取消
    handleeviceCacel(formName) {
      this.$refs[formName].resetFields({})
      this.dialogAddDeviceForm = false
    },
    open() {
      this.dialogAddDeviceForm = true
    },
    onClose() {
      this.$refs.formName.resetFields({})
      this.loading = false
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.loading = true
          this.$http.post(`/api/cloud_device/create`, this.vps).then(res => {
            console.log('res', res)
            if (res.success) {
              this.loading = false
              this.$success('新建成功')
              this.dialogAddDeviceForm = false
            } else {
              this.$error(res.msg)
            }
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    removeDomain(item) {
      var index = this.vps.vpns.indexOf(item)
      if (index !== -1) {
        this.vps.vpns.splice(index, 1)
      }
    },
    addDomain() {
      this.vps.vpns.push({
        vpnPlatName: '',
        username: '',
        passwd: '',
        maxOnline: '',
        key: Date.now()
      })
    }
  }
}
</script>

<style lang="less" scoped>
.inp {
  margin-bottom: 5px;
}

.dialog-footer {
  text-align: center;
}
</style>
